<template>
	<view class="house-select-page">
		<!-- 客户需求信息 -->
		<view class="customer-demand-section">
			<view class="demand-card">
				<view class="demand-header">
					<uni-icons type="notification" size="20" color="#ff6b35"></uni-icons>
					<text class="demand-title">{{ customerInfo.customerName }} {{ customerInfo.phone }}</text>
				</view>
				
				<!-- <view class="info-item" >
					<text class="info-label">总价</text>
					<text class="info-value"> {{getText($budgetList,curIntentionInfo.budget)}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">付款方式</text>
					<text class="info-value">{{getText($paymentOptions,curIntentionInfo.payment_method)}}</text>
				</view> -->
				<view class="demand-content">
					<view class="demand-item" v-if="curIntentionInfo.budget">
						<text class="demand-label">预算总价：</text>
						<text class="demand-value">{{getText($budgetList,curIntentionInfo.budget)}}万</text>
					</view>
					<view class="demand-item" v-if="curIntentionInfo.payment_method">
						<text class="demand-label">付款方式：</text>
						<text class="demand-value">{{getText($paymentOptions,curIntentionInfo.payment_method)}}</text>
					</view> 
					<view class="demand-item" v-if="curIntentionInfo.area">
						<text class="demand-label">面积：</text>
						<text class="demand-value">{{getText($areas,curIntentionInfo.area)}}</text>
					</view>
					<view class="demand-item" v-if="curIntentionInfo.product">
						<text class="demand-label">户型：</text>
						<text class="demand-value">{{getText($productList,curIntentionInfo.product)}}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 筛选条件 -->
		<view class="filter-section">
			<view class="filter-row">
				<view class="filter-group">
					<scroll-view class="filter-scroll" scroll-x>
						<view class="filter-container">
							<view class="filter-item" :class="{ 
									active: currentBuilding === building.value,
								}" v-for="building in houseData" :key="building.label" @click="selectBuilding(building.value)">
								<text class="filter-text">{{ building.label}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="filter-row">
				<view class="filter-group">
					<scroll-view class="filter-scroll" scroll-x>
						<view class="filter-container">
							<view class="filter-item" :id="'floor-' + floor.value" :class="{ 
									active: currentFloor === floor.value,
								}" v-for="floor in floorOptions" :key="floor.value" @click="selectFloor(floor.value)">
								<text class="filter-text">{{ floor.text }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 房屋平面图 -->
		<view class="layout-section">
			<view class="section-header">
				<text class="section-title">{{ currentBuilding }}栋 {{ currentFloor }}层</text>
				<view class="legend">
					<view class="legend-item">
						<view class="color-box available"></view>
						<text>可售</text>
					</view>
					<view class="legend-item">
						<view class="color-box selected"></view>
						<text>已选</text>
					</view>
					<view class="legend-item">
						<view class="color-box sold"></view>
						<text>已售</text>
					</view>
					<view class="legend-item">
						<view class="color-box reserved"></view>
						<text>预订</text>
					</view>
					<view class="legend-item">
						<view class="color-box recommended"></view>
						<text>上次选择</text>
					</view>
				</view>
			</view>

			<view class="layout-container" scroll-y>
				<!-- 楼层平面图 -->
				<view class="floor-plan">
					<view class="floor-layout">
						<!-- 房屋布局 -->
						<view v-if="currentFloorHouses.length > 0">
							<!-- 左侧房屋 -->
							<view class="house-row grid-container">
								<view class="house-unit" v-for="house in currentFloorHouses" :key="house._id">
									<view class="house-item"
										:class="(selectedHouse && selectedHouse._id ==  house._id)? 'selected '+house.statusClass : house.statusClass"
										@click="selectHouse(house)">
										<text class="house-number">{{ house.roomNumber }}</text>
										<text class="house-type">{{ house.roomLayout }} {{ house.area }}㎡</text>
										<!-- <text class="house-area">{{ house.area }}㎡</text> -->
										<text class="house-price">{{ formatPrice(house.totalPrice) }}</text>
										<view v-if="house.status === 1" class="select-indicator">
											<uni-icons v-if="selectedHouse && selectedHouse._id === house._id"
												type="checkmark" size="16" color="#fff"></uni-icons>
										</view>
										<view v-if="isRecommendedHouse(house)" class="recommend-house-tag">
											推荐
										</view>
									</view>
								</view>
							</view>



						</view>

						<!-- 无房屋数据提示 -->
						<view v-else class="no-houses">
							<uni-icons type="home" size="60" color="#ccc"></uni-icons>
							<text class="no-houses-text">该楼层暂无房屋数据</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 选中的房屋信息 -->
		<view v-if="selectedHouse" class="selected-house-section">
			<view class="selected-house-card">
				<view class="card-header">
					<text class="card-title">已选房屋</text>
					<view class="status-tags">
						<text class="house-status-tag" :class="selectedHouse.statusClass">
							{{ getStatusText(selectedHouse.status) }}
						</text>
					</view>
				</view>
				<view class="house-details">
					<!-- <view class="detail-row">
						<text class="detail-label">房屋编号</text>
						<text class="detail-value">{{ selectedHouse.propertyCode }}</text>
					</view> -->
					<view class="detail-row">
						<text class="detail-label">位置</text>
						<text
							class="detail-value">{{ selectedHouse.buildingNumber }}栋{{ selectedHouse.roomNumber }}室</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">户型面积</text>
						<text class="detail-value">{{ selectedHouse.roomLayout }} | {{ selectedHouse.area }}㎡</text>
					</view>
					<!-- <view class="detail-row">
						<text class="detail-label">朝向</text>
						<text class="detail-value">{{ getOrientationText(selectedHouse.orientation) }}</text>
					</view> -->
					<view class="detail-row">
						<text class="detail-label">备注</text>
						<text class="detail-value">{{ selectedHouse.description }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">总价</text>
						<text class="detail-value price">{{ $formatNumber(selectedHouse.totalPrice) }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">单价</text>
						<text class="detail-value">{{ selectedHouse.unitPrice }}元/㎡</text>
					</view>
					<view class="detail-row">
						<view class="detail-label is-required" style="padding-right: 10rpx;">申请折扣</view>
						<view style="display: flex;flex-direction: column;align-items: flex-end;">
							<uni-data-checkbox class="check-price" v-model="applyZK" :localdata="range"
								@change="change"></uni-data-checkbox>
								
							<uni-easyinput type="number" placeholder="请输入价格" v-model="otherPrice"></uni-easyinput>
						</view>
					</view>
					<view class="detail-row">
						<view class="detail-label is-required" style="padding-right: 10rpx;">定金</view>
						<view style="display: flex;flex-direction: column;align-items: flex-end;">
							<uni-easyinput type="number" placeholder="请输入定金" v-model="deposit"></uni-easyinput>
						</view>
					</view>
					<view class="detail-row">
						<text class="detail-label">申请价格</text>
						<text class="detail-value price">{{applyPrice}}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label is-required">其它资料</text>
					</view>
					<uni-file-picker v-model="imageArr" fileMediatype="image" mode="grid" @progress="uploadprogress"/>
					<!-- <view class="detail-row" v-if="isRecommendedHouse(selectedHouse)">
						<text class="detail-label match-info">✅ 符合客户预算和户型需求</text>
					</view>
					<view class="detail-row" v-else>
						<text class="detail-label mismatch-info">⚠️ 超出客户预算或户型不匹配</text>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="action-bar">
			<view class="action-content">
				<view class="selected-info" v-if="selectedHouse">
					<text
						class="selected-text">已选择：{{ selectedHouse.buildingNumber }}栋{{ selectedHouse.roomNumber }}室</text>
					<text class="selected-price">{{ formatPrice(applyPrice) }}</text>
				</view>
				<view class="action-buttons">
					<button class="action-btn reset-btn" @click="resetSelection">重新选择</button>
					<button class="action-btn confirm-btn" @click="confirmSelection" :disabled="!selectedHouse">
						确认选择
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 客户信息
				customerInfo: {},
				// 客户意向信息
				curIntentionInfo: {},
				customerId: '',
				intentionId: '',

				// 当前选择
				currentBuilding: '1',
				currentFloor: '1',
				selectedHouse: null,

				houseData: [{
					children: []
				}],

				range: [{
					"value": 0.99,
					"text": "99折"
				}, {
					"value": 0.98,
					"text": "98折"
				}, {
					"value": 0.97,
					"text": "97折"
				}],
				applyZK: '',
				_id: '',
				lastHouseId: '',
				lastHouse:{},
				otherPrice:'',
				imageArr:[],
				uploading:false,
				deposit:''
			}
		},
		computed: {
			// 楼层选项（显示所有楼层1-18层）
			floorOptions() {
				let curBuildIng = this.houseData.filter(buildIng => {
					return buildIng.value == this.currentBuilding
				})
				let floors = []
				if (curBuildIng[0] && curBuildIng[0].children.length) {
					curBuildIng[0].children.map(item => {
						floors.push({
							value: item.value * 1,
							text: item.label,
							disabled: item.disabled
						})
					})
				}
				floors.sort((a, b) => {
					return a.value - b.value
				})
				return floors
			},

			// 当前楼层的房屋
			currentFloorHouses() {
				let curBuildIng = this.houseData.filter(buildIng => {
					return buildIng.value == this.currentBuilding
				})
				let houses = []
				if (curBuildIng[0] && curBuildIng[0].children.length) {
					curBuildIng[0].children.map(item => {
						if (this.currentFloor == item.value * 1) {
							houses = item.houses
						}
					})
				}
				houses.sort((a, b) => {
					return a.unitNumber - b.unitNumber
				})
				
				console.log('houseData',this.houseData)
				return houses
			},


			// 右侧房屋（双号）
			applyPrice() {
				console.log('this.selectHous', this.selectHous, this.applyZK)
				if (!this.selectedHouse || !this.applyZK) {
					return '0.00'
				}

				// 确保值是数字类型
				const housePrice = Number(this.selectedHouse.totalPrice) || 0
				const discount = Number(this.applyZK) || 0

				// 计算并格式化结果
				let result = housePrice * discount
				if(this.otherPrice){
					result = result*1 + this.otherPrice*1
				}
				// result = result + this.otherPrice
				console.log('applyPrice', result)
				// 使用 toFixed(2) 而不是 fixed(2)
				return result.toFixed(2)
			}
		},
		async onLoad(options) {
			this._id = options.id
			let houseId = null
			// let curIntertionInfo = uni.getStorageSync('curIntertionInfo')
			let curCustomerInfo = uni.getStorageSync('curCustomerInfo')
			this.customerInfo = curCustomerInfo
			this.curIntentionInfo = curCustomerInfo.intentionInfo || {}
			
			// 编辑
			if (options.id) {
				const curItem = uni.getStorageSync('curAddHouse')
				this.currentBuilding = curItem.houseInfo.buildingNumber;
				this.currentFloor = curItem.houseInfo.floor * 1;
				this.applyZK = curItem.applyZK
				this.lastHouseId = curItem.houseId
				houseId = curItem.houseId
				this.deposit = curItem.deposit
				this.otherPrice = curItem.otherPrice
				this.imageArr = curItem.imageArr || []
				console.log('xxx', this.selectedHouse)
			} 
			// else {
			// 	if (this.curIntentionInfo.preferred_buildings && this.curIntentionInfo.preferred_buildings.length >
			// 		0) {
			// 		this.currentBuilding = this.curIntentionInfo.preferred_buildings[0].replace('号楼', '');
			// 	}
			// 	if (this.curIntentionInfo.min_acceptable_floor) {
			// 		this.currentFloor = this.curIntentionInfo.min_acceptable_floor;
			// 	}
			// }
			await this.getHouseList(houseId)


		},
		methods: {
			getText(arr,val){
				let res = ''
				if(Array.isArray(val)){
					val.map(item=>{
						arr.map(one=>{
							if(one.value == item){
								res = res +' ' + one.text
							}
						})
					})
				}else{
					for (var key in arr) {
						const item = arr[key]
						if(item.value == val){
							res = item.text
							break;
						}
					}
				}
				return res
			},
			uploadprogress(e) {
				if (e.progress != 100) {
					this.uploading = true
				} else {
					this.uploading = false
				}
			},
			// 选择图片
			change(e) {
				this.applyZK = e.detail.value
			},
			// 检查是否是推荐楼栋
			isRecommendedBuilding(building) {
				if (!this.curIntentionInfo.preferred_buildings) return false;
				// return this.curIntentionInfo.preferred_buildings.includes(building + '号楼');
			},

			// 检查是否是推荐楼层
			isRecommendedFloor(floor) {
				if (!this.curIntentionInfo.min_acceptable_floor || !this.curIntentionInfo.max_acceptable_floor)
					return false;
				const floorNum = parseInt(floor);
				const minFloor = parseInt(this.curIntentionInfo.min_acceptable_floor);
				const maxFloor = parseInt(this.curIntentionInfo.max_acceptable_floor);
				return floorNum >= minFloor && floorNum <= maxFloor;
			},

			// 选择楼栋
			selectBuilding(building) {
				this.currentBuilding = building;
				this.selectedHouse = null;
			},

			// 选择楼层 - 移除楼层可用性检查，所有楼层都可以选择
			selectFloor(floor) {
				this.currentFloor = floor;
				this.selectedHouse = null;
			},

			// 选择房屋
			selectHouse(house) {
				
				console.log('selectHouse',house,this.lastHouseId)
			
				if (house.status === 1 || this.lastHouseId == house._id) { // 只有可售状态才能选择
					this.selectedHouse = house;
					// this.applyPrice = house.totalPrice
				}
			},

			// 判断房屋是否符合客户需求
			isRecommendedHouse(house) {
				return
				if (!this.curIntentionInfo.total_budget || !this.curIntentionInfo.preferred_unit_types) {
					return false;
				}

				// 检查预算（在预算范围内）
				const minBudget = parseFloat(this.curIntentionInfo.total_budget.min) * 10000;
				const maxBudget = parseFloat(this.curIntentionInfo.total_budget.max) * 10000;
				const withinBudget = house.totalPrice >= minBudget && house.totalPrice <= maxBudget;

				// 检查户型
				const layoutMatch = this.curIntentionInfo.preferred_unit_types.some(type =>
					house.roomLayout?.includes(type.replace('室', '室').replace('厅', '厅'))
				);

				// 检查楼栋
				const buildingMatch = this.curIntentionInfo.preferred_buildings.includes(house.buildingNumber + '号楼');

				// 检查楼层
				const floorNum = parseInt(house.floor);
				const minFloor = parseInt(this.curIntentionInfo.min_acceptable_floor);
				const maxFloor = parseInt(this.curIntentionInfo.max_acceptable_floor);
				const floorMatch = floorNum >= minFloor && floorNum <= maxFloor;

				// 返回是否推荐（预算范围内且户型匹配）
				return withinBudget && layoutMatch && buildingMatch && floorMatch;
			},

			// 获取房屋状态样式类
			getHouseStatusClass(house) {
				
				console.log('houser',house)
				let statusClass = ''
				const status = parseInt(house.status);
				switch (status) {
					case 1:
						statusClass = 'available';
						break;
					case 2:
						statusClass = 'reserved';
						break;
					case 3:
						statusClass = 'sold';
						break;
					case 101:
						statusClass = 'available';
						break;
					default:
						break;
				}
				
				console.log('嘻嘻嘻',status,statusClass,this.selectedHouse)
				// 如果是选中的房屋，添加选中样式
				
				if(this._id && this.lastHouseId === house._id){
					statusClass = 'recommended'
				}
				
				// house.statusClass = 'available'
				return statusClass ;
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					1: '可售',
					2: '已预订',
					3: '已售'
				};
				return statusMap[status] || '未知';
			},

			// 获取状态样式类
			getStatusClass(h) {
				if (h._id == this.lastHouseId) {
					h.status = 1
				}
				const classMap = {
					1: 'status-available',
					2: 'status-reserved',
					3: 'status-sold'
				};
				return classMap[h.status] || 'status-unknown';
			},

			// 格式化价格
			formatPrice(price) {
				if (!price) return '￥0';
				if (price >= 10000) {
					return `￥${(price / 10000).toFixed(1)}万`;
				}
				return `￥${price.toLocaleString()}`;
			},

			// 重置选择
			resetSelection() {
				this.selectedHouse = null;
			},

			// 确认选择
			confirmSelection() {
				if (!this.applyPrice) {
					uni.showToast({
						title: '请先选填写价格',
						icon: 'none'
					});
					return;
				}
				if (!this.selectedHouse) {
					uni.showToast({
						title: '请先选择房屋',
						icon: 'none'
					});
					return;
				}
				if(this.uploading){
					return uni.showToast({
							title: '正在上传中...',
							icon: 'none'
						});
				}
				if(!this.imageArr){
					return 
						uni.showToast({
							title: '请上传资料',
							icon: 'none'
						});
					
				}

				uni.showModal({
					title: '确认选择',
					content: `确定为客户【${this.customerInfo.customerName}】,选择 ${this.selectedHouse.buildingNumber}栋${this.selectedHouse.roomNumber}室,总价${this.applyPrice}吗？`,
					success: (res) => {
						if (res.confirm) {
							this.reserveHouse();
						}
					}
				});
			},

			// 预订房屋
			async reserveHouse() {
				try {
					const result = await this.$cloudOBjAjax('house-reservation', 'reserve', {
						houseId: this.selectedHouse._id,
						customerId: this.customerInfo._id,
						applyPrice: this.applyPrice,
						applyZK: this.applyZK,
						_id: this._id,
						consultantId: this.customerInfo.consultantId,
						consultantName: this.customerInfo.consultantName,
						imageArr:this.imageArr,
						otherPrice:this.otherPrice,
						customerName:this.customerInfo.customerName,
						deposit:this.deposit

					})
					// 这里调用实际的预订接口

					if (result) {
						uni.showToast({
							title: '预订成功',
							icon: 'success'
						});

						// to do 添加lifeCyle
						const desc =
							`客户 ${this.customerInfo.customerName} 选择 ${this.selectedHouse.buildingNumber}栋${this.selectedHouse.roomNumber}室,总价${this.applyPrice}吗`
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						throw new Error(result.message);
					}

				} catch (err) {

					console.error('预订房屋失败:', err);
					uni.showToast({
						title: '预订失败，请重试',
						icon: 'none'
					});
				}
			},
			getHouseList(houseId) {
				this.$cloudOBjAjax('sunny-house', 'getHouseList', {
					pageSize: 1000,
				}).then(res => {
					const treeData = this.buildTreeData(res, houseId);
					this.houseData = treeData
					console.log('树形数据:', treeData);
					// 这里可以将 treeData 绑定到您的组件数据中
				});
			},

			// 构建树形数据结构
			buildTreeData(houses, houseId) {
				const buildingMap = new Map();
				const floorMap = new Map();

				// 先分组
				houses.map(item => {
					item.statusClass = this.getHouseStatusClass(item)
					console.log('xxxxxxxxxxxxxx',item)
					const buildKey = `building${item.buildingNumber}`;
					const floorKey = `${buildKey}_floor${item.floor}`;
					// 楼栋分组
					if (!buildingMap.has(buildKey)) {
						buildingMap.set(buildKey, []);
					}
					buildingMap.get(buildKey).push(item);

					// 楼层分组
					if (!floorMap.has(floorKey)) {
						floorMap.set(floorKey, []);
					}
					floorMap.get(floorKey).push(item);
					if (this._id && houseId == item._id) {
						this.lastHouse = {...item}
						this.selectedHouse = {
							...item
						}
					}
					return item
				});

				// 构建树形结构
				const treeData = [];

				// 遍历楼栋
				buildingMap.forEach((buildingHouses, buildKey) => {
					const buildingNumber = buildKey.replace('building', '');
					const buildingNode = {
						label: `${buildingNumber}栋`,
						value: `${buildingNumber}`,
						type: 'building',
						children: []
					};

					// 获取该楼栋的所有楼层
					const floorKeys = Array.from(floorMap.keys()).filter(key =>
						key.startsWith(buildKey)
					);

					// 遍历楼层
					floorKeys.forEach(floorKey => {
						const floorHouses = floorMap.get(floorKey);
						const floorNumber = floorKey.split('floor')[1];

						// 检查该楼层是否全部为 status 2 或 3
						const isDisabled = floorHouses.every(house =>
							house.status === 2 || house.status === 3
						);

						const floorNode = {
							label: `${floorNumber}层`,
							value: `${floorNumber}`,
							type: 'floor',
							disabled: isDisabled,
							houses: floorHouses,
							// 可以根据需要添加推荐标记
						};

						buildingNode.children.push(floorNode);
					});

					// 按楼层数字排序
					buildingNode.children.sort((a, b) => {
						const aFloor = parseInt(a.label);
						const bFloor = parseInt(b.label);
						return bFloor - aFloor; // 降序排列
					});

					treeData.push(buildingNode);
				});

				// 按楼栋数字排序
				treeData.sort((a, b) => {
					const aBuilding = parseInt(a.label);
					const bBuilding = parseInt(b.label);
					return aBuilding - bBuilding; // 升序排列
				});

				return treeData;
			},
		}
	}
</script>

<style scoped lang="scss">
	.house-select-page {
		background-color: #f8f9fa;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.customer-demand-section {
		padding: 20rpx;
	}

	.demand-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.demand-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.demand-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.demand-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx;
	}

	.demand-item {
		display: flex;
		align-items: center;
	}

	.demand-label {
		font-size: 24rpx;
		color: #666;
		font-weight: 500;
	}

	.demand-value {
		font-size: 24rpx;
		color: #ff6b35;
		font-weight: bold;
	}

	.filter-section {
		background: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.filter-row {
		margin-bottom: 20rpx;
	}

	.filter-row:last-child {
		margin-bottom: 0;
	}

	.filter-scroll {
		white-space: nowrap;
	}

	.filter-container {
		display: inline-flex;
		gap: 16rpx;
	}

	.filter-item {
		position: relative;
		padding: 16rpx 24rpx;
		background: #f8f9fa;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #666;
		transition: all 0.3s;
		flex-shrink: 0;
	}

	.filter-item.active {
		background: #ff6b35;
		color: #fff;
	}

	.filter-item.recommended {
		border: 2rpx solid #ff6b35;
	}

	.filter-text {
		font-weight: 500;
	}

	.recommend-badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background: #ff6b35;
		color: #fff;
		padding: 4rpx 8rpx;
		border-radius: 12rpx;
		font-size: 18rpx;
	}

	.layout-section {
		background: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		flex-shrink: 0;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.legend {
		display: flex;
		gap: 16rpx;
		flex-wrap: wrap;
	}

	.legend-item {
		display: flex;
		align-items: center;
		gap: 6rpx;
		font-size: 20rpx;
		color: #666;
	}

	.color-box {
		width: 20rpx;
		height: 20rpx;
		border-radius: 4rpx;
	}

	.color-box.available {
		background: #52c41a;
	}

	.color-box.selected {
		background: #ff6b35;
	}

	.color-box.sold {
		background: #ff4d4f;
	}

	.color-box.reserved {
		background: #fa8c16;
	}

	.color-box.recommended {
		background: #1890ff;
	}

	.layout-container {
		padding: 30rpx;
		flex: 1;
		width: calc(100% - 60rpx);
	}

	.floor-plan {
		/* background: #f8f9fa; */
		border-radius: 12rpx;
		/* padding: 30rpx; */
		/* min-height: 400rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.floor-layout {
		width: 100%;
	}

	.houses-container {
		display: flex;
		gap: 40rpx;
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 3列，每列等宽 */
		gap: 10px;
		/* 设置间隙 */
	}

	.house-row {
		/* flex: 1;
		display: flex;
		flex-direction: column;
		gap: 20rpx; */
	}

	.house-unit {
		height: 120rpx;
	}

	.house-item {
		position: relative;
		height: 100%;
		border: 2rpx solid #e8e8e8;
		border-radius: 12rpx;
		/* padding: 20rpx; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		transition: all 0.3s;
		cursor: pointer;
	}

	.house-item.available {
		background: #f6ffed;
		border-color: #b7eb8f;
	}

	.house-item.available.selected {
		background: #ff6b35;
		border-color: #ff6b35;
		color: #fff;
	}

	.house-item.recommended {
		// background: #e6f7ff;
		border-color: #91d5ff;
		color:#91d5ff;
	}

	.house-item.available.selected {
		background: #ff6b35;
		border-color: #ff6b35;
	}
	
	.house-item.selected {
		background: #ff6b35 !important;
		border-color: #ff6b35 !important;
		color:white !important;
	}

	.house-item.sold {
		background: #fff2f0;
		border-color: #ffccc7;
		color: #999;
	}

	.house-item.reserved {
		background: #fff7e6;
		border-color: #ffd591;
		color: #666;
	}

	.house-number {
		font-size: 28rpx;
		font-weight: bold;
	}

	.house-type,
	.house-area,
	.house-price {
		font-size: 20rpx;
	}

	.select-indicator {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 32rpx;
		height: 32rpx;
		background: #52c41a;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.recommend-house-tag {
		position: absolute;
		top: 8rpx;
		left: 8rpx;
		background: #1890ff;
		color: #fff;
		padding: 4rpx 8rpx;
		border-radius: 12rpx;
		font-size: 18rpx;
	}

	.corridor {
		width: 80rpx;
		background: #e8e8e8;
		border-radius: 8rpx;
	}

	/* 无房屋数据样式 */
	.no-houses {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx;
		color: #999;
	}

	.no-houses-text {
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #999;
	}

	.selected-house-section {
		background: #fff;
		margin: 0 20rpx 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.selected-house-card {
		padding: 30rpx;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.status-tags {
		display: flex;
		gap: 12rpx;
	}

	.house-status-tag {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		color: #fff;
	}

	.status-available {
		background: #52c41a;
	}

	.status-reserved {
		background: #fa8c16;
	}

	.status-sold {
		background: #ff4d4f;
	}

	.recommended-tag {
		background: #1890ff;
	}

	.house-details {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.detail-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 0;
		border-bottom: 1rpx solid #f8f9fa;
	}

	.detail-row:last-child {
		border-bottom: none;
	}

	.detail-label {
		font-size: 26rpx;
		color: #666;
	}

	.detail-value {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.detail-value.price {
		color: #ff6b35;
		font-weight: bold;
		font-size: 28rpx;
	}

	.match-info {
		color: #52c41a;
		font-weight: 500;
		width: 100%;
		text-align: center;
	}

	.mismatch-info {
		color: #fa8c16;
		font-weight: 500;
		width: 100%;
		text-align: center;
	}

	.action-bar {
		background: #fff;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.action-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.selected-info {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		flex: 1;
	}

	.selected-text {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.selected-price {
		font-size: 28rpx;
		color: #ff6b35;
		font-weight: bold;
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
	}

	.action-btn {
		border: none;
		border-radius: 4rpx;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 80rpx;
		height: 80rpx;
		padding: 0 20rpx;
	}

	.reset-btn {
		background: #f8f9fa;
		color: #666;
		// border: 2rpx solid #e9ecef;
	}

	.confirm-btn {
		background: #ff6b35;
		color: #fff;
	}

	.confirm-btn:disabled {
		background: #ccc;
		color: #999;
	}

	.is-required {
		color: #dd524d;
		font-weight:bold;
	}
	::v-deep .check-price {
		&.uni-data-checklist {
			padding: 10rpx 0;

			.checklist-group {
				justify-content: flex-end;
			}

			.checklist-box {
				margin-right: 20rpx;

				&.is-checked {
					color: #dd524d;

					.radio__inner {
						border-color: #dd524d !important;

						.radio__inner-icon {
							background-color: #dd524d !important;
						}
					}

					.checklist-text {
						color: #dd524d !important;
					}
				}
			}
		}
	}
</style>